<template>
  <div class="app-container">
    <!-- 对话框(添加 / 修改) -->
	<div class="borders" style="padding: 10px;">
		<h1 style="text-align: center;">新建团队</h1>
      <el-form  :rules="rules"  :inline="true" ref="formRef" :model="formData"  v-loading="formLoading" label-width="100px">
				<div class="borders">
				
                   <el-form-item label="团号" prop="numbers">
                      <el-input v-model="formData.numbers" placeholder="请输入团号" disabled />
                    </el-form-item>
                    <el-form-item label="线路名称" prop="lineNames">
						<el-input v-model="formData.lineNames" placeholder="请选择" disabled>
							<el-button slot="append">
							   <el-link type="primary" @click="lineNameClick(1)">散</el-link>
							   <el-link type="success" style="margin-left: 8px;"@click="lineNameClick(0)">团</el-link>
							</el-button>
						</el-input>
					 <!-- <el-select v-model="formData.lineNames" placeholder="请输入线路名称" @change="changeLineNames">
					        <el-option v-for="dict in this.getDictDatas(DICT_TYPE.team_orde_lineNames)" :key="dict.label"
					          :label="dict.label" :value="dict.label" />
					  </el-select> -->
					    
                    </el-form-item>
                   <!-- <el-form-item label="线路id" prop="lineId">
                      <el-input v-model="formData.lineId" placeholder="请输入线路id" />
                    </el-form-item> -->
                    <el-form-item label="业务类型" prop="type">
                      <el-select v-model="formData.type" placeholder="请选择业务类型">
                            <el-option v-for="dict in this.getDictDatas(DICT_TYPE.team_orde_type)" :key="dict.value"
                              :label="dict.label" :value="dict.value" />
                      </el-select>
					 
                    </el-form-item>
					<el-form-item label="团型" prop="blocksType">
					  <el-select v-model="formData.blocksType" placeholder="请选择业务团型">
					        <el-option v-for="dict in this.getDictDatas(DICT_TYPE.team_orde_blocksType)" :key="dict.value"
					          :label="dict.label" :value="dict.value" />
					  </el-select>
					</el-form-item>
					<el-form-item label="团说明" prop="teamRemark">
					  <el-input type="textarea"  autosize v-model="formData.teamRemark" placeholder="请输入团说明" />
					</el-form-item>
				</div>
					
				<div class="borders">
                    <el-form-item label="组团社" prop="blocks">
                      <el-input v-model="formData.blocks" placeholder="请输入组团社" />
                    </el-form-item>
                    <el-form-item label="组团联系人" prop="blocksName">
                      <el-input v-model="formData.blocksName" placeholder="请输入组团联系人" />
                    </el-form-item>
                    <el-form-item label="k" prop="k">
                      <el-input v-model="formData.k" placeholder="请输入k" />
                    </el-form-item>
				</div>	
				<div class="borders">
					
					<el-link type="primary" style="padding-bottom: 5px;" @click="arriveDatedialogVisible=true">选择日期</el-link>
					   
					 
					<table class="table-bordered">
						<tbody>
							<tr>
								<th></th>
								<th>日期</th>
								<th>交通</th>
								<th>班次</th>
								<!-- <th>时间</th> -->
								<th>站点/机场</th>
								<th>订票方式</th>
								<th>出发/返回城市</th>
								<th>跨天</th>
								<th>备注</th>
								<th></th>
							</tr>
							<tr>
								<td>抵达</td>
								<td>
									<el-form-item  prop="arriveDate">
									  <el-date-picker clearable v-model="formData.arriveDate" type="datetime" value-format="timestamp" placeholder="选择抵达日期" />
									</el-form-item>
								</td>
								<td>
									<el-form-item  prop="arriveTraffic">
									  <el-select v-model="formData.arriveTraffic" placeholder="抵达交通">
									        <el-option v-for="dict in this.getDictDatas(DICT_TYPE.team_orde_traffic)" :key="dict.value"
									          :label="dict.label" :value="dict.value" />
									  </el-select>
									</el-form-item>
								</td>
								<td>
									<el-form-item  prop="arriveClasses">
									  <el-input v-model="formData.arriveClasses" placeholder="抵达班次" />
									</el-form-item>
								</td>
								<!-- <td>
									<el-form-item  prop="arriveTime">
									  <el-date-picker clearable v-model="formData.arriveTime" type="date" value-format="timestamp" placeholder="选择抵达时间" />
									</el-form-item>
								</td> -->
								<td>
									<el-form-item  prop="arriveSite">
									  <el-select v-model="formData.arriveSite" placeholder="抵达站点/机场">
									        <el-option v-for="dict in this.getDictDatas(DICT_TYPE.team_orde_site)" :key="dict.value"
									          :label="dict.label" :value="dict.value" />
									  </el-select>
									</el-form-item>
								</td>
								<td>
									<el-form-item  prop="arriveBooking">
									  <el-select v-model="formData.arriveBooking" placeholder="抵达订票方式">
									        <el-option v-for="dict in this.getDictDatas(DICT_TYPE.team_orde_booking)" :key="dict.value"
									          :label="dict.label" :value="dict.value" />
									  </el-select>
									</el-form-item>
								</td>
								<td>
									<el-form-item  prop="arriveCity">
									  <el-input v-model="formData.arriveCity" placeholder="抵达城市" />
									</el-form-item>
								</td>
								<td>
									<el-form-item  prop="arriveDays">
									  <el-input v-model="formData.arriveDays" placeholder="跨天数" />
									</el-form-item>
								</td>
								<td>
									<el-form-item  prop="arriveRemark">
									  <el-input type="textarea"  autosize v-model="formData.arriveRemark" placeholder="备注" />
									</el-form-item>
								</td>
								
								
							</tr>
							<tr>
								<td>返程</td>
								<td>
									<el-form-item  prop="returnDate">
									  <el-date-picker clearable v-model="formData.returnDate" type="date" value-format="timestamp" placeholder="选择抵达日期" />
									</el-form-item>
								</td>
								<td>
									<el-form-item  prop="returnTraffic">
									  <el-select v-model="formData.returnTraffic" placeholder="返程交通">
									        <el-option v-for="dict in this.getDictDatas(DICT_TYPE.team_orde_traffic)" :key="dict.value"
									          :label="dict.label" :value="dict.value" />
									  </el-select>
									</el-form-item>
								</td>
								<td>
									<el-form-item  prop="returnClasses">
									  <el-input v-model="formData.returnClasses" placeholder="返程班次" />
									</el-form-item>
								</td>
								<!-- <td>
									<el-form-item  prop="returnTime">
									  <el-date-picker clearable v-model="formData.returnTime" type="date" value-format="timestamp" placeholder="选择返程时间" />
									</el-form-item>
								</td> -->
								<td>
									<el-form-item  prop="returnSite">
									  <el-select v-model="formData.returnSite" placeholder="返程站点/机场">
									        <el-option v-for="dict in this.getDictDatas(DICT_TYPE.team_orde_site)" :key="dict.value"
									          :label="dict.label" :value="dict.value" />
									  </el-select>
									</el-form-item>
								</td>
								<td>
									<el-form-item  prop="returnBooking">
									  <el-select v-model="formData.returnBooking" placeholder="返程订票方式">
									        <el-option v-for="dict in this.getDictDatas(DICT_TYPE.team_orde_booking)" :key="dict.value"
									          :label="dict.label" :value="dict.value" />
									  </el-select>
									</el-form-item>
								</td>
								<td>
									<el-form-item  prop="returnCity">
									  <el-input v-model="formData.returnCity" placeholder="返程城市" />
									</el-form-item>
								</td>
								<td>
									
								</td>
								<td>
									<el-form-item  prop="returnRemark">
									  <el-input type="textarea"  autosize v-model="formData.returnRemark" placeholder="备注" />
									</el-form-item>
								</td>
								
								
							</tr>
						</tbody>
					</table>
				</div>	
				<div class="borders">
                    <el-form-item label="全陪/客人" prop="guestName">
                      <el-input v-model="formData.guestName" placeholder="请输入姓名" />
                    </el-form-item>
                    <el-form-item label="电话" prop="guestPhone">
                      <el-input v-model="formData.guestPhone" placeholder="请输入电话" />
                    </el-form-item>
                    <el-form-item label="成人人数" prop="guestAdult">
                      <el-input v-model="formData.guestAdult" placeholder="请输入成人人数" />
                    </el-form-item>
                    <el-form-item label="儿童人数" prop="guestChildren">
                      <el-input v-model="formData.guestChildren" placeholder="请输入儿童人数" />
                    </el-form-item>
                    <el-form-item label="全陪人数" prop="guestAccompany">
                      <el-input v-model="formData.guestAccompany" placeholder="请输入全陪人数" />
                    </el-form-item>
				</div>		
				<div class="borders">	
                    <el-form-item label="定金" prop="deposit">
                      <el-input v-model="formData.deposit" placeholder="请输入定金" />
                    </el-form-item>
                    <el-form-item label="代收" prop="collecting">
                      <el-input v-model="formData.collecting" placeholder="请输入代收" />
                    </el-form-item>
                    <el-form-item label="司导代收团款" prop="collectingDumpling">
                      <el-input v-model="formData.collectingDumpling" placeholder="请输入司导代收团款" />
                    </el-form-item>
                    <el-form-item label="返款" prop="reversePayment">
                      <el-input v-model="formData.reversePayment" placeholder="请输入返款" />
                    </el-form-item>
                    <el-form-item label="客服审核" prop="approve">
						<el-checkbox v-model="formData.approve"></el-checkbox>
                    </el-form-item>
                    <el-form-item label="是否需要收款" prop="receivePayment">
						<el-checkbox v-model="formData.receivePayment"></el-checkbox>
                    </el-form-item>
				</div>	
				<div class="borders">		
                    <el-form-item label="代收费用说明" prop="collectingRemark">
                      <el-input  type="textarea"  autosize v-model="formData.collectingRemark" placeholder="请输入代收费用说明" />
					  
                    </el-form-item>
				</div>	
				<div class="borders">	
                    <el-form-item label="住宿说明" prop="stayRemarks">
                      <el-input  type="textarea"  autosize v-model="formData.stayRemarks" placeholder="请输入住宿说明" />
                    </el-form-item>
				</div>
				<div class="borders">
					<h2 style="color: #a94442; text-align: center;">行程和团款明细需要创建订单成功后才允许操作！！</h2>
				</div>
				<div class="borders">
					<el-form-item label="外联计调名字" prop="outreachName">
					  <el-input v-model="formData.outreachName" placeholder="请输入外联计调名字" />
					</el-form-item>
					<el-form-item label="外联计调电话" prop="outreachPhone">
					  <el-input v-model="formData.outreachPhone" placeholder="请输入外联计调电话" />
					</el-form-item>
                    <el-form-item label="用车说明" prop="carRemarks">
                      <el-input  type="textarea"  autosize v-model="formData.carRemarks" placeholder="请输入用车说明" />
                    </el-form-item>
                    <el-form-item label="导游说明" prop="guideRemarks">
                      <el-input  type="textarea"  autosize v-model="formData.guideRemarks" placeholder="请输入导游说明" />
                    </el-form-item>
                    <el-form-item label="备注" prop="remarks">
                      <el-input  type="textarea"  autosize v-model="formData.remarks" placeholder="请输入备注" />
                    </el-form-item>
                   
				</div>	
                  
      </el-form>
      <div class="buttons">
        <el-button type="primary" @click="submitForm" :disabled="formLoading">提 交</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
	</div>
	<!-- 线路模板弹窗 -->
	<div>
		<el-dialog title="线路模板" :visible.sync="dialogVisible3" width="80%" >
		  <div>
			  <el-table border    v-loading="loading"    :data="list"    :stripe="true"    :show-overflow-tooltip="true"   >
			        <el-table-column label="团/散" align="center" prop="breakst" width="100px" >
			  		  <template v-slot="scope">
			  		  	<div>
			  				<span v-if="scope.row.breakst">散</span>
			  				<span v-else>团</span>
			  			</div>
			  		  </template>
			  	  </el-table-column>
			  	  <el-table-column label="系列" align="center" prop="type" />
			        <el-table-column label="线路名称" align="center" prop="name"  width="350px"/>
			        <el-table-column label="线路" align="center" prop="nameLin" width="300px"/>
			        <el-table-column label="代号" align="center" prop="number" />
			        <el-table-column label="天数" align="center" prop="days" />
			        <el-table-column label="排序" align="center" prop="sort" />
			      
			        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
			          <template v-slot="scope">
			            <el-button size="mini" type="text" icon="el-icon-edit" @click="lineNameSelect(scope.row)"
			                       >选择</el-button>
			          </template>
			        </el-table-column>
			      </el-table>
			      <!-- 分页组件 -->
			      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
			                  @pagination="getList"/>
			  
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible3 = false">取 消</el-button>
		    <!-- <el-button type="primary" @click="dialogVisible3 = false">确 定</el-button> -->
		  </span>
		</el-dialog>
		
	</div>
	<el-dialog title="选择日期" :visible.sync="arriveDatedialogVisible" width="30%" >
		<div>
			<el-date-picker clearable v-model="arriveDate" type="datetime" value-format="timestamp" placeholder="选择日期" />
			<el-select v-model="tian" placeholder="请选择业务团型">
			     <el-option v-for="dict in 40" :key="dict"
			       :label="dict+'天'+Number(dict-1)+'晚'" :value="Number(dict-1)" />
			</el-select>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="arriveDatedialogVisible=false">取 消</el-button>
			<el-button type="primary" @click="clickArriveDate">确 定</el-button>
		</span>
  </el-dialog>
  </div>
</template>

<script>
	import { getUserProfile } from "@/api/system/user";
	import { getDictDatas, DICT_TYPE } from '@/utils/dict'
	import moment from 'moment';
	import * as LineApi from '@/api/team/line';
    import * as OrdeApi from '@/api/team/orde';
	import * as LineTripApi from '@/api/team/linetrip';
	import {
	  getPassword,
	  getRememberMe, getTenantName,
	  getUsername,
	  removePassword, removeRememberMe, removeTenantName,
	  removeUsername,
	  setPassword, setRememberMe, setTenantId, setTenantName,
	  setUsername
	} from "@/utils/auth";
    export default {
    name: "OrdeForm",
    components: {
                    },
    data() {
      return {
		  arriveDate:null,
		  tian:null,
        // 弹出层标题
        dialogTitle: "",
		// 遮罩层
		loading: true,
        // 是否显示弹出层
        dialogVisible: false,
		dialogVisible3:false,
		arriveDatedialogVisible:false,
		list:[],
		lineTrip1:[],
		total:0,
        // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
        formLoading: false,
		queryParams: {
		   pageNo: 1,
		   pageSize: 10,
		  name: null,
		  nameLin: null,
		  type: null,
		  number: null,
		  days: null,
		  sort: null,
		  remarkStay: null,
		  attention: null,
		  isEffective: null,
		  remak: null,
		  
		},
        // 表单参数
        formData: {
                            id: undefined,
                            numbers:"TD"+this.getCurrentDateTime(),
                            lineNames: undefined,
                            lineId: undefined,
                            type: undefined,
                            teamRemark: undefined,
                            blocks: undefined,
                            blocksName: undefined,
							    blocksType: undefined,
                            k: undefined,
                            arriveDate: undefined,
                            arriveTraffic: undefined,
                            arriveClasses: undefined,
                            arriveTime: undefined,
                            arriveSite: undefined,
                            arriveBooking: undefined,
                            arriveCity: undefined,
                            arriveDays: undefined,
                            arriveRemark: undefined,
                            returnDate: undefined,
                            returnTraffic: undefined,
                            returnClasses: undefined,
                            returnTime: undefined,
                            returnSite: undefined,
                            returnBooking: undefined,
                            returnCity: undefined,
                            returnDays: undefined,
                            returnRemark: undefined,
                            guestName: undefined,
                            guestPhone: undefined,
                            guestAdult: undefined,
                            guestChildren: undefined,
                            guestAccompany: undefined,
                            deposit: undefined,
                            collecting: undefined,
                            collectingDumpling: undefined,
                            reversePayment: undefined,
                            approve: undefined,
                            receivePayment: undefined,
                            collectingRemark: undefined,
                            stayRemarks: undefined,
                            carRemarks: undefined,
                            guideRemarks: undefined,
                            remarks: undefined,
                            outreachName: undefined,
                            outreachPhone: undefined,
                            date1: undefined,
                            date2: undefined,
                            date3: undefined,
                            date4: undefined,
                            date5: undefined,
                            date6: undefined,
                            date7: undefined,
                            date8: undefined,
                            date9: undefined,
                            date10: undefined,
                            date11: undefined,
                            date12: undefined,
                            date13: undefined,
                            date14: undefined,
                            date15: undefined,
                            date16: undefined,
                            date17: undefined,
                            date18: undefined,
                            date19: undefined,
                            date20: undefined,
                            date21: undefined,
                            date22: undefined,
                            date23: undefined,
                            date24: undefined,
                            date25: undefined,
                            date26: undefined,
                            date27: undefined,
                            date28: undefined,
                            date29: undefined,
                            date30: undefined,
                            date31: undefined,
                            date32: undefined,
        },
        // 表单校验
        formRules: {
        },
		
		rules: {
		    arriveDate: [
		      { required: true, message: ' ', trigger: 'blur' },
		    ],
				lineNames: [
				  { required: true, message: ' 请选择', trigger: 'blur' },
				],
		},
		ineNameTypeList:getDictDatas(DICT_TYPE.team_orde_lineNames)
        };
    },
		created() {
			this.getUserList()
		}
		,
    methods: {
		//选择团
		lineNameSelect(row){
			this.formData.lineNames=row.name
			this.formData.blocksType=row.type
			//
			let sp=row.nameLin.split("+")
			
			this.formData.date32=JSON.stringify(row.nameLin.split("+"));
			//生成酒店数组长度30
			this.formData.date31=JSON.stringify(new Array(sp.length).fill(""))
			
			
			if(row.breakst)this.formData.date8="散";
			if(!row.breakst)this.formData.date8="团";
			
			this.dialogVisible3=false;
			//查询选择的行程模板信息
			this.getLine(row.id);
			/* this.lineTrip1=row
			this.lineTrip1.id=undefined;
			 */
			
		},
		//查询选择的行程模板信息
		async getLine(id){
			try {
			  const res = await LineTripApi.getLineTripPage({column1:id,type:1});
			  this.lineTrip1=res.data.list.map(item => ({ ...item, id: undefined,type: 2 }));
			  console.log('查询选择的行程模板信息',this.lineTrip1);
			} finally {
			  
			}
		},
		lineNameClick(breakst){
			this.dialogVisible3=true
			
			this.getList(breakst)
		},
		/** 查询列表 */
		async getList(breakst) {
		  try {
			this.queryParams.breakst=breakst
		    this.loading = true;
		    const res = await LineApi.getLinePage(this.queryParams);
		    this.list = res.data.list;
		    this.total = res.data.total;
		  } finally {
		    this.loading = false;
		  }
		},
		/** 查询个人用户信息 */
		getUserList() {
			getUserProfile().then(response => {
				this.formData.outreachName=response.data.nickname
				this.formData.outreachPhone=response.data.mobile
			   
			});
		},
		
      /** 打开弹窗 */
     async open(id) {
        this.dialogVisible = true;
        this.reset();
        // 修改时，设置数据
        if (id) {
          this.formLoading = true;
          try {
            const res = await OrdeApi.getOrde(id);
            this.formData = res.data;
            this.title = "修改团队订单";
          } finally {
            this.formLoading = false;
          }
        }
        this.title = "新增团队订单";
              },
      /** 提交按钮 */
      async submitForm() {
        // 校验主表
        await this.$refs["formRef"].validate();
                  this.formLoading = true;
        try {
		  this.formData.date1=moment(this.formData.arriveDate).format('YYYY-MM-DD HH:mm:ss');
		  this.formData.date5=moment(this.formData.arriveDate).format('YYYY-MM-DD HH:mm:ss');
          const data = this.formData;
		  data.listLinTrip=this.lineTrip1
		  console.log("提交添加的提交",this.formData)
            // 修改的提交
          if (data.id) {
            await OrdeApi.updateOrde(data);
            this.$modal.msgSuccess("修改成功");
            this.dialogVisible = false;
            this.$emit('success');
            return;
          }
          // 添加的提交
		  this.addlineTripDate()
        await OrdeApi.createOrde(data);
          this.$modal.msgSuccess("新增成功");
          this.dialogVisible = false;
          this.$emit('success');
        } finally {
          this.formLoading = false;
		  this.reset();
        }
      },
	  //给行程加入日期
	  addlineTripDate(){
		  let addDate=moment( this.formData.arriveDate).add( this.lineTrip1.length-1, 'days').format('YYYY-MM-DD');
		  console.log("日期 this.lineTrip1", addDate)
		 // this.formData.arriveDate; //抵达日期
		  this.lineTrip1.forEach((item,index) => {
			  item.dates= moment( addDate).subtract(index, 'days').format('YYYY-MM-DD');
			  console.log(Number(this.lineTrip1.length-index)+"：给行程加入日期"+item.evening,item.dates)
		  })
		console.log("给行程加入日期 this.lineTrip1", this.lineTrip1)
	  },
			//选择日期
	    clickArriveDate(){
				console.log("选择的天",this.tian)//选择的天
				console.log("选择的日期",this.arriveDate)//选择的天
				let jies=moment(this.arriveDate).add(this.tian, 'days').format('YYYY-MM-DD')		
				console.log("结束日期",moment(jies).valueOf())//选择的天
				this.formData.arriveDate=this.arriveDate
				this.formData.returnDate=moment(jies).valueOf();
				this.arriveDatedialogVisible=false
		},
	 getCurrentDateTime() {
		 const now = new Date();
		 const year = now.getFullYear();
		 const month = this.padNumber(now.getMonth() + 1);
		 const day = this.padNumber(now.getDate());
		 const hours = this.padNumber(now.getHours());
		 const minutes = this.padNumber(now.getMinutes());
		 const seconds = this.padNumber(now.getSeconds());
		 return (
		   year + month + day + hours + minutes + seconds
		 );
		 
	  },
	  padNumber(num) {
	        return num < 10 ? '0' + num : num;
	   },
	  changeLineNames(value){
		     //获取对应的值
		    // 获取对应的 label
		    const selectedLabel= this.ineNameTypeList.find(item => item.label === value).value;
			console.log('选中的值:', selectedLabel); // 这里的 value 是选中的 option 的 value
			let sp=selectedLabel.split("+")
			this.formData.date32=JSON.stringify(selectedLabel.split("+"));
			//生成酒店数组长度30
			this.formData.date31=JSON.stringify(new Array(sp.length).fill(""))
			console.log('this.formData.date32:',this.formData);
			
	  },
                      /** 表单重置 */
      reset() {
        this.formData = {
                            id: undefined,
                            numbers:"TD"+this.getCurrentDateTime(),
                            lineNames: undefined,
                            lineId: undefined,
                            type: undefined,
                            teamRemark: undefined,
                            blocks: undefined,
                            blocksName: undefined,
                            k: undefined,
                            arriveDate: undefined,
                            arriveTraffic: undefined,
                            arriveClasses: undefined,
                            arriveTime: undefined,
                            arriveSite: undefined,
                            arriveBooking: undefined,
                            arriveCity: undefined,
                            arriveDays: undefined,
                            arriveRemark: undefined,
                            returnDate: undefined,
                            returnTraffic: undefined,
                            returnClasses: undefined,
                            returnTime: undefined,
                            returnSite: undefined,
                            returnBooking: undefined,
                            returnCity: undefined,
                            returnDays: undefined,
                            returnRemark: undefined,
                            guestName: undefined,
                            guestPhone: undefined,
                            guestAdult: undefined,
                            guestChildren: undefined,
                            guestAccompany: undefined,
                            deposit: undefined,
                            collecting: undefined,
                            collectingDumpling: undefined,
                            reversePayment: undefined,
                            approve: undefined,
                            receivePayment: undefined,
                            collectingRemark: undefined,
                            stayRemarks: undefined,
                            carRemarks: undefined,
                            guideRemarks: undefined,
                            remarks: undefined,
                            outreachName: undefined,
                            outreachPhone: undefined,
                            date1: undefined,
                            date2: undefined,
                            date3: undefined,
                            date4: undefined,
                            date5: undefined,
                            date6: undefined,
                            date7: undefined,
                            date8: undefined,
                            date9: undefined,
                            date10: undefined,
                            date11: undefined,
                            date12: undefined,
                            date13: undefined,
                            date14: undefined,
                            date15: undefined,
                            date16: undefined,
                            date17: undefined,
                            date18: undefined,
                            date19: undefined,
                            date20: undefined,
                            date21: undefined,
                            date22: undefined,
                            date23: undefined,
                            date24: undefined,
                            date25: undefined,
                            date26: undefined,
                            date27: undefined,
                            date28: undefined,
                            date29: undefined,
                            date30: undefined,
                            date31: undefined,
                            date32: undefined,
        };
        this.resetForm("formRef");
      }
    }
  };
</script>
<style scoped>
	.borders{
		border: solid 1px #dadada;
		    padding-top: 10px;
		.el-form-item { 
			margin-bottom:12px !important;
		}
		
	}
	table {
	    border-spacing: 0;
	    border-collapse: collapse;
	}
	.table-bordered {
	    border: 1px solid #95bce2;
	}
	.table-bordered>tbody>tr>td, 
	.table-bordered>tbody>tr>th,
	.table-bordered>tfoot>tr>td,
	.table-bordered>tfoot>tr>th,
	.table-bordered>thead>tr>td, 
	.table-bordered>thead>tr>th{
		border: 1px solid #ddd;
		
	}
	.table-bordered > thead > tr > th, 
	.table-bordered > tbody > tr > th, 
	.table-bordered > tfoot > tr > th, 
	.table-bordered > thead > tr > td, 
	.table-bordered > tbody > tr > td, 
	.table-bordered > tfoot > tr > td{
	    border: 1px solid #95bce2;
	}
	table th {
	   background-color: #c5ddf1;
	   
	   
	}
	table td{
		padding-top: 5px;
	}
	.buttons{
		display: flex;
		justify-content: center;
		padding-top: 10px;
	}
</style>